<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.highcharts-figure, .highcharts-data-table table {
			min-width: 310px; 
			max-width: 800px;
			margin: 1em auto;
		}
		.highcharts-data-table table {
			font-family: Verdana, sans-serif;
			border-collapse: collapse;
			border: 1px solid #EBEBEB;
			margin: 10px auto;
			text-align: center;
			width: 100%;
			max-width: 500px;
		}
		.highcharts-data-table caption {
			padding: 1em 0;
			font-size: 1.2em;
			color: #555;
		}
		.highcharts-data-table th {
			font-weight: 600;
			padding: 0.5em;
		}
		.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
			padding: 0.5em;
		}
		.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
			background: #f8f8f8;
		}
		.highcharts-data-table tr:hover {
			background: #f1f7ff;
		}
	
	</style>
	<script type="text/javascript" src="../../js/libs/jquery.min.js "></script>
	<script type="text/javascript" src="../../js/libs/layui/layui.js"></script>
	<script type="text/javascript" src="../../js/libs/vue/vue.js"></script>
	<script type="text/javascript" src="../../js/libs/vue/axios.min.js"></script>
	<script type="text/javascript" src='../../js/libs/plotly/plotly-latest.min.js'></script>
	<script type="text/javascript" src="../../js/libs/echarts/echarts.min.js"></script>
	<script src="../../js/libs/highcharts/highcharts.js"></script>
	<script src="../../js/libs/highcharts/highcharts-more.js"></script>
	<script src="../../js/libs/highcharts/dumbbell.js"></script>
	<script src="../../js/libs/highcharts/exporting.js"></script>
	<script src="../../js/libs/highcharts/export-data.js"></script>
	<script src="../../js/libs/highcharts/accessibility.js"></script>
	<body>
		
		<figure class="highcharts-figure">
			<div id="container"></div>
		</figure>
		<br />
		<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
		<br />
		<div id="main" style="width: 100%;height:400px;"></div>
	</body>
	
		
<script>
	// 啞鈴圖
	var data = [{
		name: 'Austria',
		low: 69,
		high: 82
	}, {
		name: 'Belgium',
		low: 70,
		high: 81
	}, {
		name: 'Bulgaria',
		low: 69,
		high: 75
	}, {
		name: 'Croatia',
		low: 65,
		high: 78
	}, {
		name: 'Cyprus',
		low: 70,
		high: 81
	}, {
		name: 'Czech Republic',
		low: 70,
		high: 79
	}, {
		name: 'Denmark',
		low: 72,
		high: 81
	}, {
		name: 'Estonia',
		low: 68,
		high: 78
	}, {
		name: 'Finland',
		low: 69,
		high: 81
	}, {
		name: 'France',
		low: 70,
		high: 83
	}, {
		name: 'Greece',
		low: 68,
		high: 81
	}, {
		name: 'Spain',
		low: 69,
		high: 83
	}, {
		name: 'Netherlands',
		low: 73,
		high: 82
	}, {
		name: 'Ireland',
		low: 70,
		high: 82
	}, {
		name: 'Lithuania',
		low: 70,
		high: 75
	}, {
		name: 'Luxembourg',
		low: 68,
		high: 83
	}, {
		name: 'Latvia',
		low: 70,
		high: 75
	}, {
		name: 'Malta',
		low: 69,
		high: 82
	}, {
		name: 'Germany',
		low: 69,
		high: 81
	}, {
		name: 'Poland',
		low: 68,
		high: 78
	}, {
		name: 'Portugal',
		low: 63,
		high: 81
	}, {
		name: 'Romania',
		low: 66,
		high: 75
	}, {
		name: 'Slovakia',
		low: 70,
		high: 77
	}, {
		name: 'Slovenia',
		low: 69,
		high: 81
	}, {
		name: 'Sweden',
		low: 73,
		high: 82
	}, {
		name: 'Hungary',
		low: 68,
		high: 76
	}, {
		name: 'Italy',
		low: 69,
		high: 83
	}, {
		name: 'UK',
		low: 71,
		high: 81
	}];
	Highcharts.chart('container', {
		chart: {
			type: 'dumbbell',
			inverted: true
		},
		legend: {
			enabled: false
		},
		subtitle: {
			text: '1960 vs 2018'
		},
		title: {
			text: '各国预期寿命变化'
		},
		tooltip: {
			shared: true
		},
		xAxis: {
			type: 'category'
		},
		yAxis: {
			title: {
				text: 'Life Expectancy (years)'
			}
		},
		series: [{
			name: '各国预期寿命变化',
			data: data
		}]
	});
	
	//小提琴
	
	var total_bills= [];
		var tips = [];
		var sexs = [];
		var smokers = [];
		var days = [];
		var times = [];
		var sizes = [];
		axios.get('./json/5.json').then( res=>{
			$.each(res.data ,function(i,row){
				total_bills.push(row.total_bill);
				tips.push(row.tip);
				sexs.push(row.sex);
				smokers.push(row.smoker);
				days.push(row.day);
				times.push(row.time);
				sizes.push(row.size);
			})
			//初始化小提琴图
			init();
		})
		
	
	function init(){
		  var data = [{
		    type: 'violin',
		    x: days,
		    y: total_bills,
		    points: 'none',
		    box: {
		      visible: true
		    },
		    line: {
		      color: 'green',
		    },
		    meanline: {
		      visible: true
		    },
		    transforms: [{
		     type: 'groupby',
		  	 groups: days,
		  	 styles: [
		  		{target: 'Sun', value: {line: {color: 'blue'}}},
		  		{target: 'Sat', value: {line: {color: 'orange'}}},
		  		{target: 'Thur', value: {line: {color: 'green'}}},
		  		{target: 'Fri', value: {line: {color: 'red'}}}
		  	 ]
		  	}]
		  }]
		  
		  var layout = {
		    title: "Multiple Traces Violin Plot",
		    yaxis: {
		      zeroline: false
		    }
		  }
		  
		  Plotly.newPlot('myDiv', data, layout);
	}
	
	
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	// 指定图表的配置项和数据
	option = {
	        title: {
	          text: '年龄段',
	          textStyle:{
	              fontSize:14,
	              color:'#444444',
	              fontFamily: "Microsoft Yahei",
	              fontWeight:'100'
	          },
	          x: 'center'
	        },
	        tooltip: {
	            trigger: 'axis',
	            axisPointer: {
	                type: 'none'
	            },
	            formatter: function (params) {
	                return params[0].name + ': ' + params[0].value;
	            }
	        },
	        xAxis: {
	            data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行', ],
	            axisTick: {show: false},
	            axisLine: {show: false},
	            axisLabel: {
	                textStyle: {
	                    color: '#444444'
	                }
	            }
	        },
	        yAxis: {
	            splitLine: {show: false},
	            axisTick: {show: false},
	            axisLine: {show: false},
	            axisLabel: {show: false}
	        },
	        color: ['#89DA4F','#FCC828','#8EC7F4','#CDCBEC','#14B961'],
	        series: [{
	            name: 'hill',
	            type: 'pictorialBar',
	            barCategoryGap: '-10%',
	            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
	            symbol: 'path://path://M10 600 Q 95 0 180 600',
	            label:{ 
	                    normal:{ 
	                      show: true, 
	                      position: 'top',
	                      formatter:'{c}%',
	                    } 
	                  },
	            itemStyle: {
	                normal: {
	                    opacity: 0.5,
	                    color: function (params){
	                      var colorList = ['#89DA4F','#FCC828','#8EC7F4','#CDCBEC','#14B961','#E3E3E3'];
	                      return colorList[params.dataIndex];
	                    }
	                },
	                emphasis: {
	                    opacity: 1
	                }
	            },
	            data: [123, 60, 25, 18, 12, 9, 2, 1],
	        }]
	    };
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>		
</html>
